<template>
	<view class="detailsPage writeMaterial customTitleBar" :style="{borderTopWidth:statusBarHeight}">
		<view class="custom-status-bar" :style="{backgroundColor: customTitleBarBg,height:statusBarHeight}"></view>
		<view class="custom-nav-bar" :style="{top:statusBarHeight,backgroundColor: customTitleBarBg,}">
			<view class="btn-icon-back"  @click="goback">返回</view>
			<text class="title-black">肿瘤心脑血管预防中心</text>
		</view>
		<view class="gap"></view>
		<view class="container-wrap">
			<view class="container">
				<view class="form">
					<view class="form-item form-item-radio" >
						<view class="form-label">性别</view>
						<view class="form-content">
						<u-radio-group  v-model="form.sex" @change="genderChange"  placement="row" >
							<label class="radio">
							<u-radio shape="circle" label="男" name="1" ></u-radio></label>
							<label class="radio">
							<u-radio shape="circle" label="女" name="0" class="radio" ></u-radio></label>
						</u-radio-group>
						</view>
					<!-- 	<picker @change="genderChange" :value="genderIndex" :range="gender" class="form-picker">
							<view class="uni-input" :style="{'color': (genderIndex == 0 ? '#9B9B9B':'#000')}">{{gender[genderIndex]}}</view>
						</picker> -->
					</view>
					<view class="form-item form-item-radio">
						<view class="form-label">是否婚配</view>
						<view class="form-content">
						<u-radio-group class="form-input" v-model="form.isMarry"  placement="row" >
							<label class="radio">
							<u-radio shape="circle" label="已婚" name="1" ></u-radio></label>
							<label class="radio">
							<u-radio shape="circle" label="未婚" name="0" ></u-radio></label>
						</u-radio-group>
						</view>
						<!--<picker @change="marriedChange" :value="marriedIndex" :range="married" class="form-picker">
						 	<view class="uni-input" :style="{'color': (marriedIndex == 0 ? '#9B9B9B':'#000')}">{{married[marriedIndex]}}</view>
						</picker> -->
					</view>
					<!-- <view class="form-item form-item-picker">
						<view class="form-label">年龄</view>
						<picker @change="ageChange" :value="ageIndex" :range="age" class="form-picker" >
							<view class="uni-input" :style="{'color': (ageIndex == 0 ? '#9B9B9B':'#000')}">{{age[ageIndex]}}</view>
						</picker>
					</view> -->
					<view class="form-item  " v-if="form.sex!=null&&form.isMarry!=null&&(form.sex!=0||form.isMarry==1)">
						<view class="form-label"  v-if="form.sex==0&&form.isMarry==1">丈夫姓氏</view>
						<view class="form-label"  v-if="form.sex==1">本人姓氏</view>
						<jPicker  :options="bloodList" showKey="bloodName" valKey="id"   @sure="husbandManSurnameChange"  :val="form.manSurnameId" class="form-picker" >
						 <!-- <view class="uni-input" :style="{'color': (husbandAgeIndex == 0 ? '#9B9B9B':'#000')}">{{husbandAge[husbandAgeIndex]}}</view> -->
						</jPicker>
					</view>
					<view class="form-item form-item-picker" v-if="form.sex!=null&&form.isMarry!=null&&(form.sex!=0||form.isMarry==1)">
						<view class="form-label" v-if="form.sex==0&&form.isMarry==1">丈夫年龄</view>
						<view class="form-label"   v-if="form.sex==1">本人年龄</view>
						<picker @change="husbandAgeChange" :value="husbandAgeIndex" :range="husbandAge" class="form-picker" >
							<view class="uni-input" :style="{'color': (husbandAgeIndex == 0 ? '#9B9B9B':'#000')}">{{husbandAge[husbandAgeIndex]}}</view>
						</picker>
					</view>
					<view class="form-item form-item-upload"  v-if="form.sex!=null&&form.isMarry!=null&&(form.sex!=0||form.isMarry==1)">
						<view class="form-label" v-if="form.sex==0&&form.isMarry==1">丈夫照片</view>
						<view class="form-label" v-if="form.sex==1">本人照片</view>
						<view class="form-content-zhaopian" >
							<view class="btn-upload">
								<u-upload 
								@delete="deleteReadmanSurnameImagePic"
									:fileList="manSurnameImageList"
									@afterRead="afterReadmanSurnameImage"
								>
							</u-upload></view></view>
					</view>
					<view class="form-item"  v-if="form.sex!=null&&form.isMarry!=null&&(form.sex!=1||form.isMarry==1)">
						<view class="form-label" v-if="form.sex==0">本人姓氏</view>
						<view class="form-label" v-if="form.sex==1&&form.isMarry==1">妻子姓氏</view>
						<!-- <view class="form-input"><input class="input" placeholder="请输入姓氏" /></view> -->
						<jPicker  :options="bloodList" showKey="bloodName" valKey="id"   @sure="husbandwManSurnameChange"  :val="form.wmanSurnameId" class="form-picker" ></jPicker>
						 <!-- <view class="uni-input" :style="{'color': (husbandAgeIndex == 0 ? '#9B9B9B':'#000')}">{{husbandAge[husbandAgeIndex]}}</view> -->
						
						<!-- <view class="btn-input-clear">清除</view> -->
					</view>
					<view class="form-item form-item-picker"  v-if="form.sex!=null&&form.isMarry!=null&&(form.sex!=1||form.isMarry==1)">
						<view class="form-label" v-if="form.sex==0">本人年龄</view>
						<view class="form-label" v-if="form.sex==1&&form.isMarry==1">妻子年龄</view>
						<picker @change="wifeAgeChange" :value="wifeAgeIndex" :range="wifeAge" class="form-picker">
							<view class="uni-input" :style="{'color': (wifeAgeIndex == 0 ? '#9B9B9B':'#000')}">{{wifeAge[wifeAgeIndex]}}</view>
						</picker>
						
					</view>
					<view class="form-item form-item-upload"  v-if="form.sex!=null&&form.isMarry!=null&&(form.sex!=1||form.isMarry==1)">
						<view class="form-label" v-if="form.sex==0">本人照片</view>
						<view class="form-label" v-if="form.sex==1&&form.isMarry==1">妻子照片</view>
						<!-- <view class="form-content"><view class="btn-upload"><image src="/static/img/btn_upload_pic.png" @click="chooseImage"></image></view></view> -->
						<view class="form-content-zhaopian" >
							<view class="btn-upload">
								<u-upload 
								@delete="deleteReadwmanSurnameImagePic"
									:fileList="wmanSurnameImageList"
									@afterRead="afterReadwmanSurnameImage"
								>
							</u-upload></view></view>
					</view>
					<!-- <view class="form-item">
						<view class="form-label">年龄</view>
						<view class="form-input"><input class="input" placeholder="请输入本人年龄" /></view>
						<view class="btn-input-clear">清除</view>
					</view> -->
					<view class="form-item">
						<view class="form-label">父亲</view>
						<jPicker  :options="bloodList" showKey="bloodName" valKey="id"   @sure="husbandfatherSurnameChange"  :val="form.fatherNameId" class="form-picker" ></jPicker>
						<!-- <view class="form-input"><input class="input" placeholder="请输入父亲姓氏" /></view>
						<view class="btn-input-clear">清除</view> -->
					</view>
					<view class="form-item">
						<view class="form-label">母亲</view>
						<jPicker  :options="bloodList" showKey="bloodName" valKey="id"   @sure="husbandmotherSurnameChange"  :val="form.mothherNameId" class="form-picker" ></jPicker>
						
						<!-- <view class="form-input"><input class="input" placeholder="请输入母亲姓氏" /></view>
						<view class="btn-input-clear">清除</view> -->
					</view>
					<view class="form-item form-item-select">
						<view class="form-label">疾病类型</view>
						<view class="form-content" @click="showDiseaseTypePopup = true">
							<text>{{form.diseaseType==null?'请选择':form.diseaseType}}</text>
						</view>
					</view>
					<view class="form-item-column">
						<view class="form-label">病情简介</view>
						<view class="form-content"><u--textarea class="textarea"   v-model="form.diseaseDesc" placeholder="为了更好的获得帮助，请尽可能详细描述病情。（200字内）"/></view>
					</view>
					<view class="form-item-column">
						<view class="form-rate"><uni-rate :value="activeValue" :size="26" :activeColor="activeColor" :margin="19" /></view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer-fixed-btn" @click="toInquirySummary">提交</view>
		<!-- 底部导航s -->
		<view class="menu-bar">
			<view class="menu-bar-item" @click="toHome"><view class="icon icon-home"></view><text>首页</text></view>
			<view class="menu-bar-item" @click="toPersonalCenter"><view class="icon icon-me"></view><text>我的</text></view>
		</view>
		<!-- 底部导航s -->
		<!-- 疾病类型选择s -->
		<uni-transition class="base-popup" :show="showDiseaseTypePopup" :mode-class="['fade']" :styles="popupClass">
			<view class="container">
				<view class="title-bar"><view class="title">重大疾病</view><view class="btn-close" @click="showDiseaseTypePopup = false">关闭弹窗</view></view>
				<view class="btn-group">
					<view class="btn-item" @click="checkeddiseaseType('恶性肿瘤')" :class="{'selected':form.diseaseType=='恶性肿瘤'}">恶性肿瘤</view>
					<view class="btn-item" @click="checkeddiseaseType('急性心肌梗死')" :class="{'selected':form.diseaseType=='急性心肌梗死'}">急性心肌梗死</view>
					<view class="btn-item" @click="checkeddiseaseType('脑中风')" :class="{'selected':form.diseaseType=='脑中风'}">脑中风</view>
					<view class="btn-item" @click="checkeddiseaseType('重大器官移植手术')" :class="{'selected':form.diseaseType=='重大器官移植手术'}">重大器官移植手术</view>
					<view class="btn-item" @click="checkeddiseaseType('尿毒症')" :class="{'selected':form.diseaseType=='尿毒症'}">尿毒症</view>
					<view class="btn-item" @click="checkeddiseaseType('残障疾病')" :class="{'selected':form.diseaseType=='残障疾病'}">残障疾病</view>
				</view>
				<view class="btn">
					<view class="btn-item" @click="showDiseaseTypePopup = false">确定</view>
				</view>
			</view>
		</uni-transition>
		<uni-transition :mode-class="['fade']" :styles="maskClass" :show="showDiseaseTypePopup" @click="showDiseaseTypePopup = false" />
		<!-- 疾病类型选择e -->
	<!-- 	<u-toast ref="uToast"></u-toast>
	<u-notify ref="uNotify" message="Hi uView"></u-notify> -->
	
	</view>
</template>

<script>
	import { saveBingli,getBloddInfoListThree} from '@/common/api.js';
	// 引入配置
	import config from '@/common/config'
	import jPicker from '@/components/J-Picker/jPicker.vue'
	import uniTransition from '@/components/uni-transition/uni-transition.vue'
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
	export default {
		components: {
      uniTransition,
	  jPicker
    },
		data() {
			return {
				activeValue:0,
			activeColor:"#FF5454",
				manSurnameImageList:[],
				wmanSurnameImageList:[],
				form:{
					sex:null,
					isMarry:null,//是否婚配
					age:null,
					manSurnameId:null,
					manSurname:null,
					manbloodType:null,
					wmanSurnameId:null,
					wmanSurname:null,
					wmanbloodType:null,
					wage:null,
					fatherNameId:null,
					fatherName:null,
					fatherbloodType:null,
					motherNameId:null,
					motherNameId:null,
					motherbloodType:null,
					manSurnameImage:null,//丈夫照片
					wmanSurnameImage:null,
					diseaseType:null,
					diseaseDesc:'',
					warningLevel:null
					
				},
				gender: ['请选择', '男', '女'],
				genderIndex: 0,
				married: ['请选择', '是', '否'],
				marriedIndex: 0,
				age: ['请选择', '10' , '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50'],
				ageIndex: 0,
				husbandAge: ['请选择', '10' , '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50'],
				husbandAgeIndex: 0,
				wifeAge: ['请选择', '10' , '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50'],
				wifeAgeIndex: 0,
				showDiseaseTypePopup: false,
				maskClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					'zIndex': 9990,
					'backgroundColor': 'rgba(0, 0, 0, 0.5)'
				},
				popupClass: {
					'position': 'fixed',
					'bottom': '0',
					'left': '0',
					'right': '0',
					'zIndex': 9991,
				},
				customTitleBarBg: 'rgba(250,250,250,1)',
				statusBarHeight: statusBarHeight,
				bloodList:[],
				baseUrl:null,
				password:'888888'
			}
		},
		onLoad(options) {
			this.baseUrl=config.baseUrl;
			setInterval(this.jisuanxing,1000);


		},onShow() {
			this.getBloddInfoList();
		},
		methods: {
			goback(){
				uni.navigateBack({
					
				})
			},
			jisuanxing(){
				console.log("+++===")
				this.activeValue=0;
				if(this.form.sex!=null&&this.form.isMarry!=null){
					if(this.form.isMarry==1){
						if(this.form.manbloodType!=this.form.wmanbloodType){
							this.activeValue=this.activeValue+2;
						}
					}
					if(this.form.fatherbloodType!=this.form.motherbloodType){
						this.activeValue=this.activeValue+1;
					}
					// if(this.activeValue<=2){
					// 	this.activeColor="#FF5454"
					// }else{
					// 	this.activeColor="#00BD8D"
					// }
					if(this.form.diseaseType!=null){
						this.activeValue=this.activeValue+3;
						this.activeColor="#FF5454"
					}
					if(this.activeValue>=5){
						this.activeValue=5;
					}
				}
				this.form.warningLevel=this.activeValue
			},
			checkeddiseaseType(desc){
				if(this.form.diseaseType==desc){
				this.form.diseaseType=null;	
				}else{
					this.form.diseaseType=desc;	
				}
				
			},
			// 删除图片
						deleteReadwmanSurnameImagePic(event) {
							this.wmanSurnameImageList.splice(event.index, 1)
							this.form.wmanSurnameImage=null;
						},
						// 新增丈夫图片
									async afterReadwmanSurnameImage(event) {
										// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
										let file = event.file;
										const result =await this.uploadFilePromise(file.url);
										this.form.wmanSurnameImage=result.absoluteURL;
										this.wmanSurnameImageList=[];
										let imageUrl={url:this.form.wmanSurnameImage}
										this.wmanSurnameImageList.push(imageUrl);
									},
			// 删除图片
						deleteReadmanSurnameImagePic(event) {
							this.manSurnameImageList.splice(event.index, 1)
							this.form.manSurnameImage=null;
						},
			// 新增丈夫图片
						async afterReadmanSurnameImage(event) {
							// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
							let file = event.file;
							const result =await this.uploadFilePromise(file.url);
							this.form.manSurnameImage=result.absoluteURL;
							this.manSurnameImageList=[];
							let imageUrl={url:this.form.manSurnameImage}
							this.manSurnameImageList.push(imageUrl);
						},uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.baseUrl+"/v1/app-api/upload/fileUpload", // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							console.log(res)
							console.log(res.data)
							const resData = JSON.parse(res.data)
							resolve(resData.data);
						}
					});
				})
			},
			getBloddInfoList(){
				// get请求
				getBloddInfoListThree().then(data => {
					console.log(data)
					this.bloodList=data;	
				}).catch(() =>{
					
				})
			
			},
			marriedChange: function(e) {
        this.marriedIndex = e.target.value
      },
			genderChange: function(e) {
        //this.genderIndex = e.target.value
		
		console.log(e);
      },
			ageChange: function(e) {
        this.ageIndex = e.target.value
		
      },husbandfatherSurnameChange(e){
			this.form.fatherNameId=e.id;
			this.form.fatherName=e.bloodName;
			this.form.fatherbloodType=e.bloodType;
			console.log(this.form.fatherSurname)
			console.log(this.form.fatherbloodType)
	  },husbandmotherSurnameChange(e){
			this.form.motherNameId=e.id;
			this.form.motherName=e.bloodName;
			this.form.motherbloodType=e.bloodType;
			console.log(this.form.motherbloodType)
	  },husbandManSurnameChange(e){
			this.form.manSurnameId=e.id;
			this.form.manSurname=e.bloodName;
			this.form.manbloodType=e.bloodType;
	  },husbandwManSurnameChange(e){
			this.form.wmanSurnameId=e.id;
			this.form.wmanSurname=e.bloodName;
			this.form.wmanbloodType=e.bloodType;
	  },
			husbandAgeChange: function(e) {
        this.husbandAgeIndex = e.target.value
		this.form.age=this.husbandAge[this.husbandAgeIndex];
		console.log( e.target.value)
      },
			wifeAgeChange: function(e) {
        this.wifeAgeIndex = e.target.value
		this.form.wage=this.husbandAge[this.wifeAgeIndex];
      },
			chooseImage(){
				uni.chooseImage({
		      sizeType: ['original', 'compressed'],
		      sourceType: ['album', 'camera'],
		    })
			},
			toInquirySummary() {
				console.log(this.form)
				if(this.form.sex==null){
					 uni.$u.toast("性别不能为空");
					return;
				}
				if(this.form.isMarry==null){
					 uni.$u.toast("性别不能为空");
					return;
				}
				if(this.form.sex==1){
					if(this.form.manSurname==null||this.form.age==null){
						uni.$u.toast("本人信息请填写完整");
						return;
					}
					if(this.form.isMarry==1){
						if(this.form.wmanSurname==null||this.form.wage==null){
							uni.$u.toast("妻子信息请填写完整");
							return;
						}
					}
				}
				
				if(this.form.sex==0){
					if(this.form.wmanSurname==null||this.form.wage==null){
						uni.$u.toast("本人信息请填写完整");
						return;
					}
					if(this.form.isMarry==1){
						if(this.form.manSurname==null||this.form.age==null){
							uni.$u.toast("丈夫信息请填写完整");
							return;
						}
					}
				}
				// if(this.form.diseaseType==null){
				// 	 uni.$u.toast("病情类型不能为空");
				// 	return;
				// }
				this.jisuanxing();
				this.form.warningLevel=this.activeValue;
				saveBingli(this.form).then(data => {
					uni.$u.toast("提交成功");
					//this.bloodList=data;	
					uni.redirectTo({
						url: '../inquirySummary/inquirySummary?status=1&orderNo='+data,
					});
				}).catch(() =>{
					
				})
				
				/* uni.redirectTo({
					url: '../inquirySummary/inquirySummary',
				}); */
			},
			toHome() {
				uni.redirectTo({
					url: '../index/index',
				});
			},
			toPersonalCenter() {
				uni.redirectTo({
					url: '../personalCenter/personalCenter',
				});
			}
			
		}
	}
</script>

<style>
	page{background-color: #fff;}
	
</style>